<template>
  <div :class="{'show': show}" class="header-search">
    <span title="请输入查询地址">
      <i :class="{'el-icon-search': true, 'blink': !show }" style="color: #639cff; font-size: 25px"
         @click.stop="click"/>
    </span>
    <el-select
        ref="headerSearchSelect"
        v-model="search"
        filterable
        default-first-option
        remote
        :remote-method="remoteMethod"
        :loading="loading"
        clearable
        placeholder="请输入地址"
        class="header-search-select"
        @change="change"
    >
      <el-option
          v-for="item in options"
          :key="item.uid"
          :label="item.label"
          :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 10px">{{ item.city }}{{ item.district }}</span>
      </el-option>
    </el-select>
    <el-button class="btn isShow" @click="setClick">设置为显示点</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import MapService from '@/utils/map'

export default {
  name: 'HeaderSearch',
  data () {
    return {
      search: '',
      options: [],
      show: false,
      loading: false
    }
  },
  methods: {
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        MapService.getMap(query, (res) => {
          if (res.result) {
            const result = res.result
            this.options = result.map(item => {
              return {
                value: item.uid,
                label: item.name,
                ...item
              }
            })
          }
          this.loading = false
        })
        // this.$api.getMap(query).then(res => {
        //   if(res.result) {
        //     const result = res.result
        //     this.options = result.map(item => {
        //       return {
        //         value: item.uid,
        //         label: item.name,
        //         ...item
        //       }
        //     })
        //   }
        //   this.loading = false
        // })
      } else {
        this.options = []
      }
    },
    click () {
      this.show = !this.show
    },
    change (val) {
      if (val) {
        const result = this.options.find(item => item.uid == val)
        this.$emit('changeAddr', result)
      }
    },
    setClick () {
      if (this.search) {
        const result = this.options.find(item => item.uid == this.search)
        localStorage.setItem('defaultAddr', JSON.stringify(result))
        this.$message.success('设置成功')
      } else {
        this.$message.error('无数据')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-search {
  box-sizing: border-box;
  font-size: 0 !important;
  position: absolute;
  bottom: 0px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;

  .search-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
  }

  .btn {
    display: none;
    background: #639cff;
    color: white;
    border-color: #639cff
  }

  .header-search-select {
    font-size: 18px;
    transition: width 0.2s;
    width: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;

    ::v-deep .el-input__inner {
      border-radius: 0;
      border: 0;
      padding-left: 0;
      padding-right: 0;
      box-shadow: none !important;
      border-bottom: 1px solid #d9d9d9;
      vertical-align: middle;
    }
  }

  &.show {
    .header-search-select {
      width: 350px;
      // margin-left: 10px;
    }

    .isShow {
      display: inline-block;
    }
  }
}
</style>
